<style type="text/css">

</style>
<div id="layui-container" class="layui-anim layui-anim-downbit">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-inline">
                <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
    </div>
</script>
<script type="text/javascript">
    layui.use(['form', 'table'], function () {
        let form = layui.form;
        let table = layui.table;
        table.render({
            elem: '#test',
            url: api.tradeAllApis,
            method: 'post',
            contentType: 'application/json',
            //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cellMinWidth: 80,
            page: true,
            limit: 15,
            limits: [15, 30, 45, 60],
            cols: [[
                {type: "checkbox", width: 50},
                {field: '', title: '序号', type: 'numbers'},
                {field: 'id', title: 'ID',width: 140},
                {field: 'controlName', title: '控制器名称',width: 150},
                {field: 'apiName', title: '接口名'},
                {field: 'reqType', title: '请求方式',width: 100},
                {field: 'paramType', title: '参数形式',width: 150},
                {field: 'paramExample', title: '参数示例'},
                {field: 'respExample', title: '响应示例'},
                {field: 'author', title: '作者',width: 100},
                {field: '', width: 137, title: '操作'}
            ]],
            request: {
                pageName: "currentPage",
                limitName: "pageSize"
            },
            toolbar: '#toolbarDemo'
        });

        let active = {
            add: function (data) {
                console.log(data);
                layer.msg('添加');
            }
        };

        //触发事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (active[obj.event]) {
                active[obj.event](obj);
            }
        });
    });
</script>
